<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Film System - User</title>
    <!-- 本地化资源 -->
    <link href="css/animate.min.css" rel="stylesheet">
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/fontawesome.min.css" rel="stylesheet">
    <style>
        :root {
            --mac-accent: #0071e3;
            --mac-bg: #f5f5f7;
            --mac-text: #1d1d1f;
            --mac-card-bg: rgba(255, 255, 255, 0.8);
            --mac-sidebar: rgba(255, 255, 255, 0.3);
            --mac-border-radius: 12px;
            --mac-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
        }
        
        /* 添加滚动条样式 */
        ::-webkit-scrollbar {
            width: 8px;
            height: 8px;
        }
        
        ::-webkit-scrollbar-track {
            background: transparent;
        }
        
        ::-webkit-scrollbar-thumb {
            background: rgba(0, 0, 0, 0.2);
            border-radius: 10px;
            border: 2px solid transparent;
            background-clip: content-box;
        }
        
        ::-webkit-scrollbar-thumb:hover {
            background: rgba(0, 0, 0, 0.4);
            background-clip: content-box;
        }
        
        ::-webkit-scrollbar-corner {
            background: transparent;
        }
        
        /* Firefox滚动条样式 */
        * {
            scrollbar-width: thin;
            scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
        }
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
        }
        
        body {
            background: url('https://images.unsplash.com/photo-1489599849927-2ee91cede3ba?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80') center/cover fixed;
            min-height: 100vh;
            padding: 0;
            margin: 0;
            color: var(--mac-text);
            overflow-x: hidden;
        }
        
        .mac-container {
            display: flex;
            min-height: 100vh;
        }
        
        .mac-sidebar {
            width: 220px;
            background: var(--mac-sidebar);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            padding: 20px 10px;
            display: flex;
            flex-direction: column;
            border-right: 1px solid rgba(255, 255, 255, 0.2);
            position: fixed;
            height: 100vh;
            z-index: 100;
        }
        
        .mac-content {
            flex: 1;
            padding: 20px;
            margin-left: 220px;
        }
        
        .mac-logo {
            text-align: center;
            margin-bottom: 30px;
            padding-top: 20px;
        }
        
        .mac-logo h3 {
            font-weight: 600;
            font-size: 1.2rem;
            margin-top: 10px;
            background: linear-gradient(90deg, #ff6b6b, #556270);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        
        .mac-nav-item {
            display: flex;
            align-items: center;
            padding: 12px 15px;
            border-radius: var(--mac-border-radius);
            margin-bottom: 8px;
            cursor: pointer;
            transition: all 0.3s ease;
            color: var(--mac-text);
            text-decoration: none;
        }
        
        .mac-nav-item:hover {
            background: rgba(255, 255, 255, 0.5);
        }
        
        .mac-nav-item.active {
            background: var(--mac-accent);
            color: white;
        }
        
        .mac-nav-item i {
            margin-right: 10px;
            font-size: 1.1rem;
            width: 20px;
            text-align: center;
        }
        
        .mac-search {
            background: rgba(255, 255, 255, 0.8);
            border-radius: 30px;
            padding: 10px 20px;
            margin-bottom: 30px;
            display: flex;
            align-items: center;
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            box-shadow: var(--mac-shadow);
            transition: all 0.3s ease;
        }
        
        .mac-search:focus-within {
            box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.3);
        }
        
        .mac-search input {
            border: none;
            background: transparent;
            flex: 1;
            padding: 5px 10px;
            outline: none;
            font-size: 0.9rem;
        }
        
        .mac-search i {
            color: #8e8e93;
        }
        
        .movie-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 25px;
            margin-top: 20px;
        }
        
        .movie-card {
            background: var(--mac-card-bg);
            border-radius: var(--mac-border-radius);
            overflow: hidden;
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            box-shadow: var(--mac-shadow);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            position: relative;
        }
        
        .movie-card:hover {
            transform: translateY(-10px) scale(1.02);
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
        }
        
        .movie-poster {
            height: 180px;
            background: linear-gradient(45deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 2rem;
            font-weight: bold;
            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        }
        
        .movie-info {
            padding: 20px;
        }
        
        .movie-title {
            font-weight: 600;
            margin-bottom: 10px;
            font-size: 1.1rem;
        }
        
        .movie-meta {
            display: flex;
            justify-content: space-between;
            margin-bottom: 15px;
            font-size: 0.85rem;
            color: #6e6e73;
        }
        
        .movie-price {
            font-weight: 600;
            color: var(--mac-accent);
        }
        
        .mac-btn {
            background: var(--mac-accent);
            color: white;
            border: none;
            border-radius: 20px;
            padding: 8px 16px;
            font-size: 0.9rem;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s ease;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }
        
        .mac-btn:hover {
            background: #0062cc;
            transform: translateY(-2px);
        }
        
        .mac-btn i {
            margin-right: 6px;
        }
        
        .mac-btn.outline {
            background: transparent;
            border: 1px solid var(--mac-accent);
            color: var(--mac-accent);
        }
        
        .mac-btn.outline:hover {
            background: rgba(0, 113, 227, 0.1);
        }
        
        /* Order list styling */
        .mac-table {
            width: 100%;
            border-collapse: separate;
            border-spacing: 0;
            background: var(--mac-card-bg);
            border-radius: var(--mac-border-radius);
            overflow: hidden;
            box-shadow: var(--mac-shadow);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
        }
        
        .mac-table th {
            background: rgba(0, 0, 0, 0.03);
            padding: 15px;
            text-align: left;
            font-weight: 500;
            color: #6e6e73;
            border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        }
        
        .mac-table td {
            padding: 15px;
            border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        }
        
        .mac-table tr:last-child td {
            border-bottom: none;
        }
        
        .mac-badge {
            display: inline-block;
            padding: 4px 8px;
            border-radius: 12px;
            font-size: 0.75rem;
            font-weight: 500;
        }
        
        .mac-badge.success {
            background: #e3f9e5;
            color: #1eb980;
        }
        
        .mac-badge.pending {
            background: #fff8e1;
            color: #ffc107;
        }
        
        /* Modal styling */
        .mac-modal {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.5);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 1000;
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s ease;
        }
        
        .mac-modal.show {
            opacity: 1;
            visibility: visible;
        }
        
        .mac-modal-content {
            background: var(--mac-card-bg);
            border-radius: var(--mac-border-radius);
            width: 90%;
            max-width: 700px;
            max-height: 90vh;
            overflow-y: auto;
            box-shadow: var(--mac-shadow);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            transform: translateY(20px);
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }
        
        .mac-modal.show .mac-modal-content {
            transform: translateY(0);
        }
        
        .mac-modal-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 20px;
            border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        }
        
        .mac-modal-title {
            font-weight: 600;
            font-size: 1.2rem;
        }
        
        .mac-modal-close {
            background: none;
            border: none;
            font-size: 1.5rem;
            cursor: pointer;
            color: #8e8e93;
            transition: color 0.3s ease;
        }
        
        .mac-modal-close:hover {
            color: var(--mac-text);
        }
        
        .mac-modal-body {
            padding: 20px;
        }
        
        .mac-modal-footer {
            padding: 15px 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-top: 1px solid rgba(0, 0, 0, 0.05);
        }
        
        /* Seat selection styling */
        .screen {
            background: linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
            height: 30px;
            width: 80%;
            margin: 0 auto 30px;
            transform: perspective(500px) rotateX(-30deg);
            box-shadow: 0 3px 10px rgba(255,255,255,0.7);
            border-radius: 5px;
        }
        
        .seat-container {
            display: grid;
            grid-template-columns: repeat(8, 1fr);
            gap: 10px;
            max-width: 600px;
            margin: 0 auto;
        }
        
        .seat {
            width: 35px;
            height: 35px;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.7rem;
            color: rgba(255, 255, 255, 0.8);
            position: relative;
            overflow: hidden;
        }
        
        .seat:before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(255, 255, 255, 0.1);
            transform: translateY(100%);
            transition: transform 0.3s ease;
        }
        
        .seat:hover:before {
            transform: translateY(0);
        }
        
        .seat.available {
            background: #8e8e93;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
        }
        
        .seat.selected {
            background: var(--mac-accent);
            transform: scale(1.1);
            box-shadow: 0 5px 15px rgba(0, 113, 227, 0.4);
        }
        
        .seat.sold {
            background: #ff3b30;
            cursor: not-allowed;
            opacity: 0.7;
        }
        
        .legend-item {
            display: flex;
            align-items: center;
            margin: 0 15px;
        }
        
        .legend-item .seat {
            width: 20px;
            height: 20px;
            margin-right: 8px;
            cursor: default;
        }
        
        /* QR Code styling */
        .qr-container {
            background: white;
            padding: 20px;
            border-radius: var(--mac-border-radius);
            display: inline-block;
            box-shadow: var(--mac-shadow);
        }
        
        /* Animation classes */
        .fade-in {
            animation: fadeIn 0.5s ease forwards;
        }
        
        .slide-up {
            animation: slideUp 0.5s ease forwards;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        
        @keyframes slideUp {
            from { transform: translateY(20px); opacity: 0; }
            to { transform: translateY(0); opacity: 1; }
        }
        
        /* Responsive adjustments */
        @media (max-width: 768px) {
            .mac-sidebar {
                width: 70px;
                padding: 20px 5px;
            }
            
            .mac-sidebar .mac-nav-text {
                display: none;
            }
            
            .mac-content {
                margin-left: 70px;
            }
            
            .mac-logo h3 {
                display: none;
            }
            
            .movie-grid {
                grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
            }
        }
    </style>
</head>
<body>
<div class="mac-container">
    <!-- Sidebar Navigation -->
    <div class="mac-sidebar">
        <div class="mac-logo">
            <i class="fas fa-film fa-2x" style="color: #ff6b6b;"></i>
            <h3>电影票务系统</h3>
        </div>
        
        <div class="mac-nav-item active" onclick="showMovies()">
            <i class="fas fa-home"></i>
            <span class="mac-nav-text">电影列表</span>
        </div>
        
        <div class="mac-nav-item" onclick="showOrders()">
            <i class="fas fa-ticket-alt"></i>
            <span class="mac-nav-text">我的订单</span>
        </div>
    </div>
    
    <!-- Main Content -->
    <div class="mac-content">
        <!-- Search Bar -->
        <div class="mac-search fade-in">
            <i class="fas fa-search"></i>
            <input type="text" id="searchInput" placeholder="搜索电影...">
        </div>
        
        <!-- Movie List -->
        <div id="movieList" class="movie-grid">
            <!-- 电影列表将通过JavaScript动态生成 -->
        </div>
        
        <!-- Order List -->
        <div id="orderList" style="display: none;">
            <h2 class="mb-4 slide-up">我的订单</h2>
            <div class="table-responsive slide-up">
                <table class="mac-table">
                    <thead>
                        <tr>
                            <th>订单号</th>
                            <th>场次ID</th>
                            <th>总金额</th>
                            <th>支付状态</th>
                            <th>下单时间</th>
                            <th>座位信息</th>
                            <th>二维码</th>
                        </tr>
                    </thead>
                    <tbody id="orderTableBody">
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<!-- 座位选择模态框 -->
<div class="mac-modal" id="seatModal">
    <div class="mac-modal-content">
        <div class="mac-modal-header">
            <h5 class="mac-modal-title">选择座位</h5>
            <button type="button" class="mac-modal-close" onclick="closeSeatModal()">&times;</button>
        </div>
        <div class="mac-modal-body">
            <div class="screen-text text-center mb-4">
                <div class="screen"></div>
                <p>屏幕</p>
            </div>
            <div id="seatContainer" class="seat-container"></div>
            <div class="seat-legend mt-4">
                <div class="d-flex justify-content-center">
                    <div class="legend-item">
                        <div class="seat available"></div>
                        <span>可选</span>
                    </div>
                    <div class="legend-item">
                        <div class="seat selected"></div>
                        <span>已选</span>
                    </div>
                    <div class="legend-item">
                        <div class="seat sold"></div>
                        <span>已售</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="mac-modal-footer">
            <span>已选择: <span id="selectedSeats">0</span> 个座位</span>
            <span>总价: ￥<span id="totalPrice">0</span></span>
            <button type="button" class="mac-btn" onclick="showPayment()">确认选择</button>
        </div>
    </div>
</div>

<!-- 支付模态框 -->
<div class="mac-modal" id="paymentModal">
    <div class="mac-modal-content">
        <div class="mac-modal-header">
            <h5 class="mac-modal-title">支付</h5>
            <button type="button" class="mac-modal-close" onclick="closePaymentModal()">&times;</button>
        </div>
        <div class="mac-modal-body text-center">
            <div class="qr-container">
                <div id="qrcode"></div>
            </div>
            <p class="mt-3">请使用手机扫描二维码完成支付</p>
            <button type="button" class="mac-btn mt-3" onclick="confirmPayment()">
                <i class="fas fa-check-circle"></i> 我已完成支付
            </button>
        </div>
    </div>
</div>

<script src="js/bootstrap.bundle.min.js"></script>
<script src="js/gsap.min.js"></script>
<script src="js/qrcode.min.js"></script>
<script src="js/crypto-js.min.js"></script>
<script>
    let movies = [];
    let currentMovie = null;
    let selectedSeats = [];
    let currentScreeningId = null;
    let currentPrice = 0;
    
    // 初始化模态框
    function openSeatModal() {
        document.getElementById('seatModal').classList.add('show');
    }
    
    function closeSeatModal() {
        document.getElementById('seatModal').classList.remove('show');
    }
    
    function openPaymentModal() {
        document.getElementById('paymentModal').classList.add('show');
    }
    
    function closePaymentModal() {
        document.getElementById('paymentModal').classList.remove('show');
    }
    
    // 重置座位选择
    function resetSeatSelection() {
        selectedSeats = [];
        document.getElementById('selectedSeats').textContent = '0';
        document.getElementById('totalPrice').textContent = '0';
    }

    // 格式化日期时间
    function formatDateTime(dateTime) {
        const date = new Date(dateTime);
        return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')} ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`;
    }

    // 购票流程
    function buyTicket(movieId) {
        // 先获取电影场次
        fetch(`/screening/movie/${movieId}`)
            .then(response => response.json())
            .then(screenings => {
                if (screenings && screenings.length > 0) {
                    currentMovie = movies.find(m => m.id === movieId);
                    showScreeningSelection(screenings);
                } else {
                    alert('暂无可用场次');
                }
            });
    }

    function showScreeningSelection(screenings) {
        const modalBody = document.querySelector('#seatModal .mac-modal-body');
        modalBody.innerHTML = `
            <h5 class="mb-4">请选择观影场次：</h5>
            <div class="list-group">
                ${screenings.map(s => `
                    <div class="movie-card mb-2" onclick="selectScreening(${s.id}, '${formatDateTime(s.screeningTime)}', ${s.price})">
                        <div class="movie-info">
                            <div class="d-flex justify-content-between align-items-center">
                                <div>
                                    <div class="movie-title">${formatDateTime(s.screeningTime)}</div>
                                </div>
                                <div class="movie-price">￥${s.price}</div>
                            </div>
                        </div>
                    </div>
                `).join('')}
            </div>
        `;
        openSeatModal();
    }

    function selectScreening(screeningId, time, price) {
        currentScreeningId = screeningId;
        currentPrice = price;

        // 更新模态框内容，添加座位选择界面
        const modalBody = document.querySelector('#seatModal .mac-modal-body');
        modalBody.innerHTML = `
            <div class="screen-text text-center mb-4">
                <div class="screen"></div>
                <p>屏幕</p>
            </div>
            <div id="seatContainer" class="seat-container"></div>
            <div class="seat-legend mt-4">
                <div class="d-flex justify-content-center">
                    <div class="legend-item">
                        <div class="seat available"></div>
                        <span>可选</span>
                    </div>
                    <div class="legend-item">
                        <div class="seat selected"></div>
                        <span>已选</span>
                    </div>
                    <div class="legend-item">
                        <div class="seat sold"></div>
                        <span>已售</span>
                    </div>
                </div>
            </div>
        `;

        // 加载座位
        loadSeats(screeningId);
    }

    function loadSeats(screeningId) {
        const container = document.getElementById('seatContainer');
        container.innerHTML = '';

        // 从后端获取座位数据
        fetch(`/order/seats/${screeningId}`)
            .then(response => response.json())
            .then(seats => {
                // 创建座位网格
                for (let i = 0; i < 80; i++) {
                    const row = Math.floor(i / 8);
                    const column = i % 8;

                    const seat = document.createElement('div');
                    seat.className = 'seat';
                    seat.dataset.row = row;
                    seat.dataset.column = column;
                    seat.innerHTML = `${row+1}-${column+1}`;

                    // 检查该座位是否已被预订
                    const seatStatus = seats.find(s =>
                        s.rowNum === row && s.columnNum === column
                    );

                    if (seatStatus && seatStatus.status === 'SOLD') {
                        seat.classList.add('sold');
                    } else {
                        seat.classList.add('available');
                        seat.onclick = () => toggleSeat(seat);
                    }

                    // 添加动画效果
                    gsap.from(seat, {
                        scale: 0.5,
                        opacity: 0,
                        duration: 0.3,
                        delay: i * 0.005,
                        ease: "back.out(1.7)"
                    });

                    container.appendChild(seat);
                }
            });
    }

    function toggleSeat(seat) {
        if (seat.classList.contains('sold')) return;

        seat.classList.toggle('selected');
        const seatInfo = {
            row: parseInt(seat.dataset.row),
            column: parseInt(seat.dataset.column)
        };

        if (seat.classList.contains('selected')) {
            selectedSeats.push(seatInfo);
            gsap.to(seat, {
                scale: 1.1,
                duration: 0.3,
                ease: "back.out(1.7)"
            });
        } else {
            selectedSeats = selectedSeats.filter(s =>
                s.row !== seatInfo.row || s.column !== seatInfo.column
            );
            gsap.to(seat, {
                scale: 1,
                duration: 0.3,
                ease: "power2.out"
            });
        }

        updateSelectedInfo();
    }

    function updateSelectedInfo() {
        document.getElementById('selectedSeats').textContent = selectedSeats.length;
        document.getElementById('totalPrice').textContent =
            (selectedSeats.length * currentPrice).toFixed(2);
    }

    function hashString(str) {
        // 使用 SHA-256 计算哈希
        const hash = CryptoJS.SHA256(str);
        // 获取哈希的十六进制字符串
        const hexHash = hash.toString(CryptoJS.enc.Hex);
        // 截取前10位
        return hexHash.substring(0, 10);
    }

    function showPayment() {
        if (selectedSeats.length === 0) {
            alert('请至少选择一个座位');
            return;
        }

        closeSeatModal();

        // 生成支付二维码
        const qrcontainer = document.getElementById('qrcode');
        qrcontainer.innerHTML = '';
        const str_code = JSON.stringify({
            movieId: currentMovie.id,
            movieTitle: currentMovie.title,
            seats: selectedSeats,
            totalAmount: selectedSeats.length * currentPrice
        });

        new QRCode(qrcontainer, {
            text: hashString(str_code),
            width: 200,
            height: 200
        });

        openPaymentModal();
    }

    function confirmPayment() {
        const orderData = {
            screeningId: currentScreeningId,
            seats: selectedSeats,
            totalAmount: selectedSeats.length * currentPrice
        };

        // 第一步：创建订单
        fetch('/order/create', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(orderData)
        })
        .then(response => response.text())
        .then(result => {
            if (result !== 'error') {
                const orderId = result;
                // 第二步：处理支付
                return fetch(`/order/pay/${orderId}`, {
                    method: 'POST'
                });
            } else {
                throw new Error('创建订单失败');
            }
        })
        .then(response => response.text())
        .then(paymentResult => {
            if (paymentResult === 'success') {
                // 支付成功处理
                const successMsg = document.createElement('div');
                successMsg.className = 'alert alert-success mt-3';
                successMsg.innerHTML = '<i class="fas fa-check-circle"></i> 购票成功！支付完成！';
                document.querySelector('#paymentModal .mac-modal-body').appendChild(successMsg);
                
                setTimeout(() => {
                    closePaymentModal();
                    selectedSeats = [];
                    loadMovies();
                    showOrders();
                }, 1500);
            } else {
                throw new Error('支付处理失败');
            }
        })
        .catch(error => {
            console.error('Error:', error);
            const errorMsg = document.createElement('div');
            errorMsg.className = 'alert alert-danger mt-3';
            errorMsg.innerHTML = '<i class="fas fa-exclamation-circle"></i> ' + error.message;
            document.querySelector('#paymentModal .mac-modal-body').appendChild(errorMsg);
        });
    }

    // 显示订单列表
    function showOrders() {
        fetch('/order/user/orders')
            .then(response => response.json())
            .then(orders => {
                const orderList = document.getElementById('orderList');
                const movieList = document.getElementById('movieList');
                const orderTableBody = document.getElementById('orderTableBody');
                
                orderList.style.display = 'block';
                movieList.style.display = 'none';
                
                orderTableBody.innerHTML = '';
                
                orders.forEach(order => {
                    const row = document.createElement('tr');
                    row.innerHTML = `
                        <td>${order.id}</td>
                        <td>${order.screeningId}</td>
                        <td class="movie-price">￥${order.totalAmount}</td>
                        <td>
                            <span class="mac-badge ${order.paymentStatus === 'PAID' ? 'success' : 'pending'}">
                                ${order.paymentStatus === 'PAID' ? '已支付' : '未支付'}
                            </span>
                        </td>
                        <td>${new Date(order.orderTime).toLocaleString()}</td>
                        <td>${order.seats.map(seat => `${seat.rowNum+1}排${seat.columnNum+1}座`).join(', ')}</td>
                        <td>${order.qrCode}</td>
                    `;
                    orderTableBody.appendChild(row);
                    
                    // 添加行动画
                    gsap.from(row, {
                        y: 20,
                        opacity: 0,
                        duration: 0.4,
                        delay: 0.1,
                        ease: "power2.out"
                    });
                });
            })
            .catch(error => console.error('Error:', error));
    }

    // 显示电影列表
    function showMovies() {
        const orderList = document.getElementById('orderList');
        const movieList = document.getElementById('movieList');
        
        orderList.style.display = 'none';
        movieList.style.display = 'grid';
    }

    // 页面加载
    window.onload = function() {
        loadMovies();
    };

    // 加载电影列表
    function loadMovies() {
        fetch('/movie/list')
            .then(response => response.json())
            .then(data => {
                movies = data;
                displayMovies(movies);
            });
    }

    // 显示电影列表
    function displayMovies(moviesToShow) {
        const movieList = document.getElementById('movieList');
        movieList.innerHTML = '';

        const colors = [
            'linear-gradient(45deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%)',
            'linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%)',
            'linear-gradient(to right, #43e97b 0%, #38f9d7 100%)',
            'linear-gradient(to right, #fa709a 0%, #fee140 100%)',
            'linear-gradient(to top, #30cfd0 0%, #330867 100%)',
            'linear-gradient(to top, #a8edea 0%, #fed6e3 100%)'
        ];

        moviesToShow.forEach((movie, index) => {
            const movieCard = document.createElement('div');
            movieCard.className = 'movie-card';
            movieCard.innerHTML = `
                <div class="movie-poster" style="background: ${colors[index % colors.length]}">
                    ${movie.title.charAt(0)}
                </div>
                <div class="movie-info">
                    <div class="movie-title">${movie.title}</div>
                    <div class="movie-meta">
                        <span>导演：${movie.director}</span>
                        <span class="movie-price">￥${movie.price}</span>
                    </div>
                    <button class="mac-btn" onclick="buyTicket(${movie.id})">
                        <i class="fas fa-ticket-alt"></i> 购票
                    </button>
                </div>
            `;

            // 添加动画效果
            gsap.from(movieCard, {
                y: 50,
                opacity: 0,
                duration: 0.6,
                delay: index * 0.1,
                ease: "power3.out"
            });

            movieList.appendChild(movieCard);
        });
    }

    // 搜索功能
    document.getElementById('searchInput').addEventListener('input', (e) => {
        const searchText = e.target.value.toLowerCase();
        const filteredMovies = movies.filter(movie =>
            movie.title.toLowerCase().includes(searchText) ||
            movie.director.toLowerCase().includes(searchText)
        );
        displayMovies(filteredMovies);
    });
</script>
</body>
</html>